<template>
  <layout>
    <div class="wrapper">
      <van-form @submit="onSubmit" class="form">
        <van-tabs v-model="formData.activeType">
          <van-tab title="电 话" name="phone">
            <van-field
              name="phone"
              label="电话"
              v-model.trim="formData.phone"
              clearable
              type="digit"
              placeholder="请输入电话号码"
            >
            </van-field>
            <van-field
              v-model="formData.sms"
              center
              clearable
              label="验证码"
              placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button
                  size="small"
                  native-type="button"
                  type="primary"
                  @click="getCode"
                  >{{ smsName
                  }}{{ smsName == "发送验证码" ? "" : "秒" }}</van-button
                >
              </template>
            </van-field>
          </van-tab>
          <van-tab title="条码号" name="code">
            <van-field
              name="reportCode"
              label="条码号"
              v-model.trim="formData.reportCode"
              clearable
              placeholder="请输入条码号"
            >
            </van-field>
          </van-tab>
        </van-tabs>

        <van-field
          name="beginTime"
          label="开始日期"
          clearable
          clear-trigger="always"
          v-model="formData.beginTime"
          placeholder="请选择开始日期"
          @click="beginTimePickerVisible = true"
        >
        </van-field>
        <van-field
          name="endTime"
          label="结束日期"
          clearable
          clear-trigger="always"
          v-model="formData.endTime"
          placeholder="请选择结束日期"
          @click="endTimePickerVisible = true"
        >
        </van-field>
        <!-- <div class="tip">
					提示:条码号与电话 二选一
				</div> -->
        <div class="btn">
          <van-button block type="info" round native-type="submit"
            >确 认</van-button
          >
        </div>
      </van-form>
      <div class="botton-tip">客服热线:&nbsp;400&nbsp;1512&nbsp;686</div>
    </div>

    <!-- 开始日期弹框  -->
    <van-popup v-model="beginTimePickerVisible" position="bottom" round>
      <van-datetime-picker
        title="选择时间"
        :value="currentDate"
        :min-date="new Date(getBeforeDate(180))"
        :max-date="new Date(getBeforeDate(0))"
        @cancel="beginTimePickerVisible = false"
        @confirm="confirmBeginTime"
        type="date"
      >
      </van-datetime-picker>
    </van-popup>
    <van-popup v-model="endTimePickerVisible" round position="bottom">
      <van-datetime-picker
        title="选择时间"
        :value="currentDate"
        :min-date="new Date(getBeforeDate(180))"
        :max-date="new Date(getBeforeDate(0))"
        @cancel="endTimePickerVisible = false"
        @confirm="confirmEndTime"
        type="date"
      >
      </van-datetime-picker>
    </van-popup>
  </layout>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import searchReportApi from "@/api/searchReport";
import reportListApi from "@/api/reportList";
export default {
  name: "searchInspectReport",
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      cardExplain: "身份证",
      // 开始日期选择弹框
      beginTimePickerVisible: false,
      // 结束日期选择弹框
      endTimePickerVisible: false,
      // 当前时间
      currentDate: new Date(),
      formData: {
        activeType: "phone",
        reportCode: "",
        phone: "",
        beginTime: "",
        endTime: "",
        sms: "",
      },
      smsName: "发送验证码",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 选择开始时间的确认
    confirmBeginTime(value) {
      console.log(value);
      let date = new Date(value);
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      this.formData.beginTime = date.getFullYear() + "-" + month + "-" + day;
      this.beginTimePickerVisible = false;
    },
    // 选择结束时间的确认
    confirmEndTime(value) {
      console.log(value);
      let date = new Date(value);
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      this.formData.endTime = date.getFullYear() + "-" + month + "-" + day;
      this.endTimePickerVisible = false;
    },
    // 获取n天前的 年月日 - 字符串格式
    getBeforeDate(n) {
      var n = n;
      var d = new Date();
      var year = d.getFullYear();
      var mon = d.getMonth() + 1;
      var day = d.getDate();
      if (day <= n) {
        if (mon > 1) {
          mon = mon - 1;
        } else {
          year = year - 1;
          mon = 12;
        }
      }
      d.setDate(d.getDate() - n);
      year = d.getFullYear();
      mon = d.getMonth() + 1;
      day = d.getDate();
      let s =
        year +
        "-" +
        (mon < 10 ? "0" + mon : mon) +
        "-" +
        (day < 10 ? "0" + day : day);
      return s;
    },
    getCode() {
      if (this.smsName != "发送验证码") {
        this.$toast({
          type: "fail",
          message: "请勿重复点击",
        });
        return;
      }

      let phone = this.formData.phone;
      let type = this.formData.activeType;
      if (type == "phone" && (phone.length == 0 ||!this.$Utils.verifyPhone(phone))) {
        this.$dialog.alert({
          title: "提示",
          message: "请检查手机号是否正确填写",
        });
        return;
      }
      this.smsName = 60;
      let timeout = setInterval(() => {
        this.smsName = this.smsName - 1;
        if (this.smsName == 0) {
          this.smsName = "发送验证码";
          clearInterval(timeout);
        }
      }, 1000);
      searchReportApi
        .getCode({
          mobile: Number(this.formData.phone),
          smsType: 203,
        })
        .then((res) => {
          if (res.status == 0) {
            this.$toast({
              type: "success",
              message: "验证码发送成功",
            });
          } else {
            this.$toast({
              type: "fail",
              message: res.msg,
            });
          }
        });
    },
    onSubmit() {
      let beginTime = new Date(this.formData.beginTime);
      let endTime = new Date(this.formData.endTime);

      // this.formData.name = this.formData.name.replace(/\s/g,"")
      this.formData.reportCode = this.formData.reportCode.replace(/\s/g, "");

      if (beginTime > endTime) {
        this.$dialog.alert({
          title: "提示",
          message: "开始日期不能大于结束日期",
        });
        return;
      }

      let code = this.formData.reportCode;
      let phone = this.formData.phone;
      let type = this.formData.activeType;
      let sms = this.formData.sms;

      //  if (code == null || code.length == 0)  -- vant组件默认为绑定组件赋值 所以值不会为空
      if (type == "code" && code.length == 0) {
        this.$dialog.alert({
          title: "提示",
          message: "条码号不能为空",
        });
        return;
      }

      if (type == "phone" && phone.length == 0) {
        this.$dialog.alert({
          title: "提示",
          message: "请检查手机号是否填写",
        });
        return;
      }

      if (type == "phone" && sms.length == 0) {
        this.$dialog.alert({
          title: "提示",
          message: "请检查验证码是否填写",
        });
        return;
      }
			const params = {
					code: this.formData.reportCode,
					beginTime: this.formData.beginTime,
					endTime: this.formData.endTime,
					phone: this.formData.phone,
					sms: this.formData.sms,
				}
			reportListApi.listReportInfo_1(params).then(res => {
				if (res.status === 0) {
					if (res.data) {
						this.$router.push({path: "inspectReportList", query: {uri: res.data}});
					} else {
						this.$dialog.alert({
							title: "提示",
							message: "暂无检验记录，请确认查询条件是否正确"
						})
					}
				} else {
					this.$dialog.alert({
						title: "提示",
						message: res.msg
					})
				}
			})
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.formData.endTime = this.getBeforeDate(0); // 结束时间等于今日
    this.formData.beginTime = this.getBeforeDate(7);

    console.log(this.getBeforeDate(1000));
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.wrapper {
  width: 93%;
  margin: auto;
  padding: 6px;
  .form {
    box-sizing: border-box;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 0 12px rgba(0, 0, 0, 10%);
    padding-bottom: 10px;
    // padding: 10px;
    .card-type {
      font-size: 12px;
      &::v-deep .van-icon {
        font-size: 10px;
        transform: translateY(0.1rem);
      }

      &::v-deep .van-radio__icon {
        padding-bottom: 2px;
      }
    }
    .tip {
      text-align: center;
      font-size: 12px;
      color: red;
      margin: 10px auto;
    }
    .btn {
      margin: 20px;
    }
  }

  .botton-tip {
    margin-top: 12px;
    font-size: 12px;
    color: red;
    line-height: 24px;
    text-indent: 24px;
  }
}
// 强行改变 tab页的样式
&::v-deep .van-tab--active {
  background: #2bad37;
  color: white;
}

&::v-deep .van-tabs__line {
  background-color: #2bad37;
}

&::v-deep .van-tabs__nav {
  border-top-left-radius: 10px; /* 左上角 */
  border-top-right-radius: 10px; /* 右上角 */
}
</style>
